<!--
 * @FilePath     : /study_code/layui/17-8.html
 * @Description  : range 配置项：开启日期范围选择 + 赋值在2个选择器中
 * @Date         : 2025-04-10 09:28:13
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-10 09:32:47
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <div class="layui-form">
      <h5 style="margin-bottom: 16px">
        1、左右面板
        <strong class="layui-font-red">独立</strong>
        选择模式（默认） :
      </h5>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">日期范围</label>
          <div class="layui-inline" id="ID-laydate-range">
            <div class="layui-input-inline">
              <input
                type="text"
                autocomplete="off"
                id="ID-laydate-start-date"
                class="layui-input"
                placeholder="开始日期"
              />
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
              <input
                type="text"
                autocomplete="off"
                id="ID-laydate-end-date"
                class="layui-input"
                placeholder="结束日期"
              />
            </div>
          </div>
        </div>
      </div>
      <h5 style="margin-bottom: 16px">
        2、左右面板
        <strong class="layui-font-red">联动</strong>
        选择模式
        <sup>2.8+</sup>
        :
      </h5>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">日期范围</label>
          <div class="layui-inline" id="ID-laydate-rangeLinked">
            <div class="layui-input-inline">
              <input
                type="text"
                autocomplete="off"
                id="ID-laydate-start-date-1"
                class="layui-input"
                placeholder="开始日期"
              />
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
              <input
                type="text"
                autocomplete="off"
                id="ID-laydate-end-date-1"
                class="layui-input"
                placeholder="结束日期"
              />
            </div>
          </div>
        </div>
      </div>
      <h5 style="margin-bottom: 16px">3、其他类型的范围选择 :</h5>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">年范围</label>
          <div class="layui-input-inline">
            <input type="text" class="layui-input" id="ID-laydate-range-year" placeholder=" - " />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">年月范围</label>
          <div class="layui-input-inline">
            <input type="text" class="layui-input" id="ID-laydate-range-month" placeholder=" - " />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">时间范围</label>
          <div class="layui-input-inline">
            <input type="text" class="layui-input" id="ID-laydate-range-time" placeholder=" - " />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">日期时间范围</label>
          <div class="layui-input-inline">
            <input
              type="text"
              class="layui-input"
              id="ID-laydate-range-datetime"
              placeholder=" - "
            />
          </div>
        </div>
      </div>
    </div>

    <script src="/layui/dist/layui.js"></script>
    <script>
      layui.use(function () {
        var laydate = layui.laydate
        // 日期范围 - 左右面板独立选择模式
        laydate.render({
          elem: '#ID-laydate-range',
          range: ['#ID-laydate-start-date', '#ID-laydate-end-date'],
        })
        // 日期范围 - 左右面板联动选择模式
        laydate.render({
          elem: '#ID-laydate-rangeLinked',
          range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
          rangeLinked: true, // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
        })

        // 年范围
        laydate.render({
          elem: '#ID-laydate-range-year',
          type: 'year',
          range: true,
        })

        // 年月范围
        laydate.render({
          elem: '#ID-laydate-range-month',
          type: 'month',
          range: true,
        })

        // 时间范围
        laydate.render({
          elem: '#ID-laydate-range-time',
          type: 'time',
          range: true,
        })

        // 日期时间范围
        laydate.render({
          elem: '#ID-laydate-range-datetime',
          type: 'datetime',
          range: true,
        })
      })
    </script>
  </body>
</html>
